<template>
  <a-layout-sider
    :collapsed="collapsed"
    :class="['sider', isDesktop ? null : 'shadow', theme, fixSidebar ? 'ant-fixed-sidemenu' : null]"
    width="256px"
    :collapsible="collapsible"
    :trigger="null"
  >
    <logo />
    <s-scroll style="height: calc(100vh - 64px)">
      <Menu
        :collapsed="collapsed"
        :menu="menus"
        :theme="theme"
        :mode="mode"
        @select="onSelect"
      ></Menu>
    </s-scroll>
  </a-layout-sider>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Logo from '@/components/tools/Logo.vue'
import Menu from './Menu.vue'
import { isDesktop } from '@/utils/device'
import { fixSidebar } from '@/store/useSiteSettings'

export default defineComponent({
  name: 'SideMenu',
  components: { Logo, Menu },
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  emits: ['menuSelect'],
  setup(props, { emit }) {
    const onSelect = (obj) => {
      emit('menuSelect', obj)
    }
    return {
      onSelect,
      isDesktop,
      fixSidebar
    }
  }
})
</script>
